<template>
  <div class="image-upload" :style="{ ...style, ...(data.style || {}) }">
    <el-upload
      list-type="picture-card"
      ref="elUpload"
      :accept="data.accept"
      :headers="requestHeaders"
      :limit="data.limit || 1"
      :action="data.action || '/gateway/file-server/file/upload/single'"
      :data="data.params || {}"
      :on-success="handleSuccess"
      :on-remove="handleRemove"
      :before-upload="beforeUpload"
      :on-preview="handlePictureCardPreview"
      :file-list="getList"
    >
      <i class="el-icon-plus"></i>
    </el-upload>

    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>
<script>
import { getToken } from '@/utils/auth'
export default {
  props: {
    data: {
      type: Object,
      default: () => ({}),
    },
    submitData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      requestHeaders: {
        Authorization: `bearer ${getToken()}`,
      },
      fileList: [],
      lastChild: null,
      pot: 0,
      style: { height: '148px', width: '148px' },
    }
  },
  mounted() {
    console.log(this.data)
  },
  computed: {
    getList() {
      if (!this.pot) {
        let list = this.setList()
        return list
      } else {
        return this.fileList
      }
    },
  },
  methods: {
    setList() {
      let { submitData, data } = this
      let fileList = []
      if (Array.isArray(submitData[data.key])) {
        if (submitData[data.key]) {
          fileList = submitData[data.key]
        }
      } else {
        if (submitData[data.key]) {
          fileList = [{ url: submitData[data.key] }]
        }
      }
      this.fileList = fileList
      return fileList
    },
    beforeUpload(file) {
      this.pot = 1
      let { limitSize, accept, message } = this.data
      let typeArr = file.name.split('.')
      let type = typeArr[typeArr.length - 1]
      if (!accept.includes(type)) {
        this.$message({
          message: message,
          type: 'warning',
        })
        return false
      }
      if (limitSize && file.size / 1024 > limitSize) {
        this.$message({
          message: '图片大小不得超过100KB',
          type: 'warning',
        })
        return false
      }
    },

    handleRemove() {
      this.$emit('handleRemove', this.data)
    },
    handleSuccess(file) {
      let { data } = this
      let obj = {}
      if (!file.data) {
        this.$message.error(file.msg);
        this.fileList = []
        return false
      }
           if(file.data.startDate ){
        file.data['expireDateTiem'] = [file.data.startDate, file.data.expireDate] 
      }
      if (data.params && data.params.type) {
        if (data.key.includes(data.params.type)) {
          for (let k in file.data) {
            obj[`${data.params.type}_${k}`] = file.data[k]
          }
        } else {
          obj = file.data
        }
        obj[data.key] = file.data.fileUrl
      } else {
        obj[data.key] = file.data.fileUrl
      }
      this.$emit('handleSuccess', {obj, data})
      this.pot = 1
    },

    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleDownload(file) {
      console.log(file)
    },
  },
}
</script>
<style lang="less" scoped>
.image-upload {
  overflow: hidden;
  /deep/ .el-upload-list__item {
    transition: none !important;
  }
}
</style>
